<template>
    <div class="news-page">
        <PageHeader 
            title="企业动态" 
            subtitle="了解易凡科技的最新资讯和行业动态"
            :breadcrumbItems="[{ text: '首页', path: '/' }]"
            currentText="企业动态"
        />
        
        <!-- 降级数据提示 -->
        <el-alert
            v-if="isFallback"
            :title="errorMessage"
            type="info"
            :closable="false"
            center
            show-icon
            style="margin-bottom: 20px;"
        />
        
        <div class="page-container">
            <!-- 分类筛选 -->
            <div class="category-filter">
                <el-radio-group v-model="selectedCategory" @change="handleCategoryChange">
                    <el-radio-button :label="null">全部分类</el-radio-button>
                    <el-radio-button v-for="category in categories" :key="category.id" :label="category.id">
                        {{ category.name }}
                    </el-radio-button>
                </el-radio-group>
            </div>
            
            <!-- 新闻列表 -->
            <div class="news-list" v-loading="loading">
                <div class="row">
                    <div class="col" v-for="item in data" :key="item._id">
                        <ArticleCard
                            :id="item._id"
                            :title="item.title"
                            :summary="getSummary(item.content)"
                            :cover="item.cover"
                            :date="item.editTime"
                            :category="getCategoryName(item.category)"
                            type="news"
                            @view="viewDetail"
                        />
                    </div>
                </div>
                
                <!-- 空状态 -->
                <el-empty v-if="!loading && data.length === 0" description="暂无相关新闻" />
            </div>
            
            <!-- 分页 -->
            <Pagination
                v-if="total > 0"
                :total="total"
                :current-page="currentPage"
                :page-size="pageSize"
                @current-change="changePage"
                @size-change="changePageSize"
            />
        </div>
    </div>
</template>

<script>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { useRouter } from 'vue-router';
import { getNewsList, getNewsCategories } from '@/api/news';
import { usePagination } from '@/utils/useApi';
import { getSummary } from '@/utils/helper';
import PageHeader from '@/components/PageHeader.vue';
import ArticleCard from '@/components/ArticleCard.vue';
import Pagination from '@/components/Pagination.vue';

export default {
    name: 'NewsView',
    components: {
        PageHeader,
        ArticleCard,
        Pagination
    },
    setup() {
        const router = useRouter();
        const selectedCategory = ref(null);
        const categories = ref([]);
        const pageSize = ref(10);
        const isFallback = ref(false);
        const errorMessage = ref('');
        
        // 降级数据 - 新闻分类
        const fallbackCategories = [
            { id: 1, name: '公司新闻' },
            { id: 2, name: '行业动态' },
            { id: 3, name: '技术洞察' }
        ];
        
        // 降级数据 - 新闻列表
        const fallbackNewsItems = [
            {
                _id: 'news1',
                title: '易凡科技成功完成B轮融资，估值达10亿元',
                content: '<p>近日，易凡科技宣布完成B轮融资，本轮融资金额3亿元，投后估值达10亿元。本轮融资由知名投资机构领投，多家行业投资机构跟投。融资所得资金将主要用于产品研发、市场拓展和团队建设，进一步巩固公司在信息技术服务领域的领先地位。</p><p>易凡科技CEO张明表示："此次融资的完成是资本市场对易凡科技业务模式与发展前景的高度认可。未来我们将继续深耕行业，为客户提供更优质的服务。"</p>',
                category: 1,
                cover: '',
                editTime: new Date().toISOString()
            },
            {
                _id: 'news2',
                title: '2023数字化转型高峰论坛圆满举行，易凡科技分享最新实践',
                content: '<p>5月20日，由工信部指导、数字经济协会主办的"2023数字化转型高峰论坛"在北京成功举行。易凡科技CTO李晓华受邀出席并发表主题演讲，分享了易凡科技在企业数字化转型领域的最新实践与思考。</p><p>李晓华在演讲中表示，数字化转型不仅是技术升级，更是思维方式与组织形态的革新。易凡科技通过"平台+服务+生态"的创新模式，已成功帮助超过500家企业实现数字化升级，显著提升了企业运营效率与核心竞争力。</p>',
                category: 2,
                cover: '',
                editTime: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString()
            },
            {
                _id: 'news3',
                title: '易凡科技发布全新AI赋能解决方案，革新企业智能化应用',
                content: '<p>日前，易凡科技正式发布了全新的"AI赋能解决方案"，该方案整合了最新的人工智能技术，包括自然语言处理、机器学习、计算机视觉等多项前沿技术，为企业在客户服务、生产制造、市场营销等多个环节提供智能化支持。</p><p>据介绍，该解决方案已在金融、零售、制造等多个行业完成了试点应用，大幅度提升了企业运营效率和用户体验，并为企业创造了全新的商业价值。易凡科技产品总监王芳表示，AI技术将是未来企业发展的核心驱动力，易凡科技计划在未来三年内将AI技术全面融入公司所有产品线。</p>',
                category: 3,
                cover: '',
                editTime: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString()
            },
            {
                _id: 'news4',
                title: '易凡科技荣获"2023年度最佳雇主"称号',
                content: '<p>在日前揭晓的"2023年度最佳雇主"评选中，易凡科技凭借优秀的企业文化、完善的人才培养体系和具有竞争力的薪酬福利，从上千家参选企业中脱颖而出，荣获"2023年度最佳雇主"称号。</p><p>易凡科技人力资源总监赵强表示，公司始终坚持"以人为本"的理念，注重员工成长与企业发展并重，努力为每位员工创造良好的工作环境和广阔的发展空间。未来，易凡科技将继续完善人才管理体系，吸引更多优秀人才加入，共同推动企业持续发展。</p>',
                category: 1,
                cover: '',
                editTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString()
            }
        ];
        
        // 使用usePagination钩子获取新闻列表
        const { 
            data, 
            error, 
            loading, 
            currentPage, 
            total, 
            loadData, 
            changePage, 
            changePageSize, 
            refresh,
            isFallback: apiIsFallback
        } = usePagination(getNewsList, { 
            pageSize: pageSize.value,
            fallbackData: fallbackNewsItems 
        });
        
        // 监听API降级状态
        watch(apiIsFallback, (newVal) => {
            isFallback.value = newVal;
            if (newVal) {
                errorMessage.value = '服务器暂时不可用，显示备用数据';
            }
        });
        
        // 获取新闻分类
        const fetchCategories = async () => {
            try {
                const res = await getNewsCategories();
                if (res.data && res.data.ActionType === 'ok') {
                    categories.value = res.data.data;
                    
                    // 检查是否使用降级数据
                    if (res.data.isUsingFallback || !res.data.data || res.data.data.length === 0) {
                        isFallback.value = true;
                        errorMessage.value = '服务器暂时不可用，显示备用数据';
                        categories.value = fallbackCategories;
                    }
                }
            } catch (error) {
                console.error('获取新闻分类失败:', error);
                isFallback.value = true;
                errorMessage.value = '无法连接到服务器，显示备用数据';
                categories.value = fallbackCategories;
            }
        };
        
        // 获取分类名称
        const getCategoryName = (categoryId) => {
            if (!categoryId) return '未分类';
            const category = categories.value.find(c => c.id === categoryId);
            return category ? category.name : '未分类';
        };
        
        // 查看详情
        const viewDetail = (id) => {
            router.push(`/news/${id}`);
        };
        
        // 处理分类变化
        const handleCategoryChange = () => {
            loadData({ 
                page: 1, 
                category: selectedCategory.value 
            });
        };
        
        // 监听分类变化
        watch(selectedCategory, () => {
            handleCategoryChange();
        });
        
        onMounted(() => {
            fetchCategories();
            loadData();
        });
        
        return {
            data,
            error,
            loading,
            currentPage,
            total,
            selectedCategory,
            categories,
            pageSize,
            getCategoryName,
            getSummary,
            viewDetail,
            changePage,
            changePageSize,
            handleCategoryChange,
            isFallback,
            errorMessage
        };
    }
}
</script>

<style lang="scss" scoped>
.news-page {
    .category-filter {
        margin-bottom: 30px;
    }
    
    .news-list {
        margin-bottom: 30px;
        min-height: 300px;
        
        .row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            
            @media (max-width: 1200px) {
                grid-template-columns: repeat(2, 1fr);
            }
            
            @media (max-width: 768px) {
                grid-template-columns: 1fr;
            }
            
            .col {
                margin-bottom: 30px;
            }
        }
    }
}
</style>